<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>

            <div class="center" v-if="getData">

                <el-row>
                    <el-col span="7">
                        <el-aside>
                            <repository-owner :message="uid" style="width: 250px;height: 300px"></repository-owner>
                        </el-aside>
                    </el-col>
                    <el-col span="17">
                        <el-card class="contextarea">
                            <el-row>
                                <el-col :span="3">
                                    <el-avatar :size="50" :src="this.circleUrl"></el-avatar>
                                </el-col>
                                <el-col :span="4">
                                    <div>{{this.uid}}</div>
                                </el-col>
                            </el-row>
                            <p>内容：{{this.content.content}}</p>
                            <el-row style="margin-top: 30px">
                                <el-col span="4">
                                    <el-badge :value="3" :max="99" class="item">
                                        <el-button size="small">收藏</el-button>
                                    </el-badge>
                                </el-col>

                            </el-row>

                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import RepositoryOwner from "../../../components/info/repositoryOwner";
    import pageFooter from "../../../components/base/pageFooter";
    import POST from "../../../api/POST";

    export default {
        name: "repositorycontext",
        components: {pageFooter, RepositoryOwner, CliTitleStudent},
        data() {
            return {
                getData: false,
                uid: '',
                cid: '',
                contentid: '',
                repository: [],
                content: '',
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        mounted() {
            this.uid = this.$route.params.uid;
            this.cid = this.$route.params.cid;
            this.contentid = this.$route.params.contentid;
            let data = {'id': this.uid, 'collectbox_id': this.cid};
            POST.showCollectboxContent(data).then(res => {
                this.repository = res.content;
                var i = 0;
                for (; i < this.repository.length; i++) {
                    if (this.repository[i].content_id === this.contentid) {
                        this.content = this.repository[i];
                        break;
                    }
                }
                this.getData = true;
            });
        }
    }
</script>

<style scoped>
    .center {
        width: 1000px;
        margin: 50px auto;
    }

    .contextarea {
        height: 600px;
        width: 600px;
    }
</style>